<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>react生命周期(新)</title>
  <!-- react核心库 -->
  <script src="../js/react.development.js"></script>
  <!-- react扩展库支持react操作DOM -->
  <script src="../js/react-dom.development.js"></script>
  <!-- 1.ES6转ES5；2.jsx转js -->
  <script src="../js/babel.min.js"></script>
  <!-- prop操作 -->
  <script src="../js/prop-types.js"></script>
</head>

<body>
  <div id="test"></div>
  <script type="text/babel">
    class Count extends React.Component {
      // 构造器
      constructor(props) {
        super(props)
        console.log('count---constructor')
        // 初始化状态
        this.state = {
          count: 0
        }
      }
      // 加1按钮回调
      add = () => {
        const { count } = this.state
        this.setState({
          count: count + 1
        })
      }
      // 强制更新按钮回调
      force = () => {
        this.forceUpdate()
      }
      // 卸载按钮回调
      death = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
      }
      // 将要挂载（新钩子）
      UNSAFE_componentWillMount() {
        console.log('count---UNSAFE_componentWillMount')
      }
      // 挂载完成
      componentDidMount() {
        console.log('count---componentDidMount')
      }
      // 卸载组件
      componentWillUnmount() {
        console.log('count---componentWillUnmount')
      }
      // 是否更新
      shouldComponentUpdate() {
        console.log('count---shouldComponentUpdate')
        return true
      }
      // 组件将要更新（新钩子）
      UNSAFE_componentWillUpdate() {
        console.log('count---UNSAFE_componentWillUpdate')
      }
      // 将要接收参数（新钩子）
      UNSAFE_componentWillReceiveProps(){
        console.log('count--componentWillReceiveProps')
      }
      // 组件更新完成
      componentDidUpdate() {
        console.log('count---componentDidUpdate')
      }
      // 渲染
      render() {
        console.log('count---render')
        return (
          <div>
            <h2>当前和为{this.state.count}</h2>
            <button onClick={this.add}>点击+1</button>
            <button onClick={this.death}>卸载组件</button>
            <button onClick={this.force}>强制更新</button>
          </div>
        )
      }
    }

    // 父组件A
    class A extends React.Component {
      state = {
        CarName: '奔驰'
      }
      changeCar = () => {
        this.setState({
          CarName: '奥迪'
        })
      }
      render() {
        console.log('A-render')
        return (
          <div>
            <div>A组件</div>
            <button onClick={this.changeCar}>换车</button>
            <B CarName={this.state.CarName}/>
          </div>
        )
      }
    }

    // 子组件B
    class B extends React.Component {
      render() {
        console.log('B-render')
        return (
          <div>B组件，我有一辆{this.props.CarName}</div>
        )
      }
    }

    ReactDOM.render(<Count />, document.getElementById('test'))
    /* 
      1、
        新版本中componentWillMount/componentWillReceiveProps/componentWillUpdate需要在前面加UNSAFE_
        (UNSAFE_componentWillMount/UNSAFE_componentWillReceiveProps/UNSAFE_componentWillUpdate)
        旧版本18版本以后可能会废弃
      2、
        引入两个新钩子函数：
    */
  </script>
</body>

</html>